<!DOCTYPE html>
<html>
<head>
<title>图片浏览器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<style>
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{padding:1em;line-height:1.6;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;background:#eee}
body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd,fieldset,textarea{margin:0}
fieldset,legend,textarea,input,button{padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;*font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
ul,ol{padding-left:0;list-style-type:none}
a img,fieldset{border:0}
a{text-decoration:none}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.6}
a{color:#607fa6;text-decoration:none}
body,html{padding:0;height:100%;width:100%;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
h2{padding:1em}
.btn{display:inline-block;margin:.3em;border:1px solid #10c7d3;background:#00b7c3;padding:.5em 1em;color:#fff;text-decoration:none;}
</style>
</head>
<body>
<h2>图片浏览器</h2>
<pre>
new CIV({
    animation: CIV.ANIMATION.TRANSLATE,
    background: "#0ff",
    list: [
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432027474009126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432027858747126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432035906703126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432035984898126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432036035333126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038769616126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038791695126290.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038814553126290.jpg"
    ]
}).show()
</pre>
<div>
    <hr>
    <h3>示例</h3>
    <a class="btn js_dlg_1" href="javascript:;">展示</a>
</div>

<script src="../dest/cimageviewer.js"></script>
<script>
window.onerror = function (e) {
    alert("error")
}
var params = {
    animation: CIV.ANIMATION.TRANSLATE,
    background: "#444",
    close: true,
    arrow: true,
    loop: true,
    save: true,
    // noSave: true,
    orderNumber: true,
    list: [
        {
            src: "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432027858747126350.jpg",
            desc: "图片描述1图片描述1图片描述1图片描述1图片描述1图片描述1图片描述1图片描述1"
        },
        {
            src: "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432027474009126350.jpg",
            desc: "图片描述"
        },
        "//p.qpic.cn/music_cover/QS96U4vDnzy1yqy00NXLIwaY9PTQt7TgA6yGAHP3K2OAEfW0J0A52w/300",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432035984898126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432036035333126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038769616126350.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038791695126290.jpg",
        "//y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1432038814553126290.jpg"
    ],
    preload: true
};
"show hide slidestart slideend slidechange click save".split(" ").forEach(function (evt) {
    params["on" + evt] = function () {
        console.log("EVENT:", evt, this);
    }
})
var civ = new CIV(params);


document.querySelector(".js_dlg_1").addEventListener("click", function () {
    civ.show();
});

setTimeout(function() {
    document.querySelector(".js_dlg_1").click()
}, 500);

</script>
</body>
</html>